<template>
	<view>
		<view class="page_header">
			<navigation textAlign="left">伊滨区养老服务平台</navigation>
			<view class="page_header_search_panel">
				<image class="page_header_search_icon" src="https://images-vx.oss-cn-beijing.aliyuncs.com/images-vx/search.png" mode="aspectFit"></image>
				<input class="page_header_search_input" v-model="searchModelSearch" @confirm="searchText" type="text" value="" placeholder="请输入服务名称" placeholder-class="page_header_search_placeholder" />
			</view> 
		</view> 
		<scroll-view scroll-y="true" class="page_scroll" scroll-with-animation="true" enable-back-to-top="true" @scrolltolower="scrollBottom">
			<view class="news_panel">
				<view class="swiper">
					<swiper class="swiper" :indicator-dots="false" :circular="true" :autoplay="true" :interval="3000" :duration="1000">
						<swiper-item v-for="(item,index) in bannerList" :key="index">
							<view class="swiper_item">
								<image class="swiper_image" :src="item" mode=""></image>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<view class="notice_panel">
					<view class="notice">
						<image class="notice_icon" src="https://images-vx.oss-cn-beijing.aliyuncs.com/images-vx/notice.png" mode="aspectFit"></image>
						<view class="notice_title">
							<swiper class="swiper_notice" :vertical="true" :indicator-dots="false" :autoplay="true" :interval="3000"
							 :duration="1000">
								<swiper-item v-for="(item,index) in notificationList" :key="index" @tap="goDetail(item)">
									<view class="swiper_swiper-item"><text>{{item.newsName}}</text></view>
								</swiper-item>
							</swiper>
						</view>
					</view>
				</view>
			</view>
			
			<view class="module">
				<view class="grid">
					<view class="grid_item" v-for="(item,index) in moduleList" :key="index" @tap="goPage(item)">
						<image class="grid_image" :src="item.image" mode="aspectFit"></image>
						<view class="grid_text"><text>{{item.text}}</text></view>
					</view>
				</view>
			</view>
			<view class="cardList">
				<view class="" v-for="(item,index) in cardList" :key="index" @tap="goPage(item)">
					<image :src="item.image" mode=""></image>
				</view>
			</view>
			<view class="news">
				<view class="news_header">
					<image class="news_icon" src="https://images-vx.oss-cn-beijing.aliyuncs.com/images-vx/information.png" mode="aspectFit"></image>
					<text class="news_title">最新资讯</text>
				</view>
				<view class="news_container">
					<informationTemplate :list="newList"></informationTemplate>
					<view class="no-data">
						<view class="more"><uni-load-more :status="moreStatus" :content-text="moreContentText" iconType="spinner" color="#666666"></uni-load-more></view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import * as commonApi from '@/api/common.js';
	import * as modelApi from '@/api/userApi/model.js';
	export default {
		data() {
			return {
				searchModelSearch: '',
				userInfo:this.$store.getters.getUserInfo,
				newList:[],
				// more
				moreStatus: 'more',
				moreContentText: {
					// 加载各状态文字说明。
					contentdown: '加载更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多了'
				},
				searchModel: {
					current: 1,
					size: 10
				},
				notificationList: [],
				bannerList: [],
				cardList:[
					{
							"image": "https://images-vx.oss-cn-beijing.aliyuncs.com/images-vx/oldserve.png",
							"text": "养老服务",
							url: '/pages/serve/serve',
							isTabbar: true
						},
						{
							"image": "https://images-vx.oss-cn-beijing.aliyuncs.com/images-vx/medicalcare.png",
							"text": "医养护理",
							url: '/pages/index/nurse/nurse',
							isTabbar: false
						},
						{
							"image": "https://images-vx.oss-cn-beijing.aliyuncs.com/images-vx/oldage.png",
							"text": "高龄津贴",
							url: '/pages/index/allowance/allowance',
							isTabbar: false
						},
						{
							"image": "https://images-vx.oss-cn-beijing.aliyuncs.com/images-vx/messagecoll.png",
							"text": "信息采集",
							url: '/pages/index/collection/collection',
							isTabbar: false
						}
				],
				moduleList: [
					{
						"image": "https://images-vx.oss-cn-beijing.aliyuncs.com/images-vx/agency-show.png",
						"text": "养老院展示",
						url: '/pages/index/nursingHome/nursingHome',
						isTabbar: false
					},
					{
						"image": "https://images-vx.oss-cn-beijing.aliyuncs.com/images-vx/ranking.png",
						"text": "机构排行",
						url: '/pages/index/agencyShow/agencyShow',
						isTabbar: false
					},
					{
						"image": "https://images-vx.oss-cn-beijing.aliyuncs.com/images-vx/feedback.png",
						"text": "意见反馈",
						url: '/pages/index/feedback/feedback',
						isTabbar: false
					},
					{
						"image": "https://images-vx.oss-cn-beijing.aliyuncs.com/images-vx/community-news.png",
						"text": "社区新闻",
						url: '/pages/index/news/news',
						isTabbar: false
					}
				]
			}
		},
		onLoad() {
		
		},
		onShow() {
			
			
		},
		methods: {
			getjurisdiction(){
				let a=uni.getStorageSync('open')
				console.log('jwt',a.jwt)
			},
			searchText(){
				console.log('this.searchModelSearch',this.searchModelSearch);
				if(this.searchModelSearch && this.searchModelSearch.length>0) {
					uni.navigateTo({
						url: `/pages/index/searchServe/searchServe?search=${this.searchModelSearch}`
					});
				}
			},
			showInit(){
				this.getBanner();
				this.getNewNotice();
				this.getNews();
			},
			goDetail(data) {
				uni.navigateTo({
					url: `/pages/index/news/newsDetail/newsDetail?id=${data.newsId}`
				});
			},
			getNews(){
				this.moreStatus = 'loading';
				modelApi
					.queryNews(this.searchModel)
					.then(res => {
						if (res.code === 0) {
							if (this.searchModel.current == 1) {
								this.newList = [];
							}
							if (res.data && res.data.length == 10) {
								this.moreStatus = 'more';
								this.searchModel.current += 1;
								this.newList = [...this.newList, ...res.data];
							} else if (res.data && res.data.length < 10) {
								this.moreStatus = 'noMore';
								this.searchModel.current += 1;
								this.newList = [...this.newList, ...res.data];
							} else {
								this.moreStatus = 'noMore';
							}
						}
					})
					.catch(e => {
						this.moreStatus = 'noMore';
						uni.showToast({
							title: e.msg,
							icon: 'none',
							duration: 1000
						});
					});
			},
			getBanner() {
				commonApi
					.queryIndexBannerOne()
					.then(res => {
						if (res.code === 0) {
							this.bannerList = res.data;
						}
					})
					.catch(e => {
						uni.showToast({
							title: e.msg,
							icon: 'none',
							duration: 1000
						});
					});
			},
			getNewNotice(){
				commonApi
					.queryIndexNotice()
					.then(res => {
						if (res.code === 0) {
							this.notificationList = res.data;
						}
					})
					.catch(e => {
						uni.showToast({
							title: e.msg,
							icon: 'none',
							duration: 1000
						});
					});
			},
			goPage(item) {
				if (item.url && item.isTabbar) {
					uni.switchTab({
						url: item.url
					});
				} else if (item.url && !item.isTabbar) {
					if(item.text == '高龄津贴') {
						let userInfo = uni.getStorageSync('open');
						console.log('跳转用',userInfo)
						console.log(userInfo.haveAllowance)
						// uni.navigateTo({
						// 	url:item.url
						// })
						if(userInfo.haveAllowance == 1) {
							uni.navigateTo({ 
								url: '/pages/index/allowanceAudit/allowanceAudit'
							});
						} else {
							uni.navigateTo({ 
								url: item.url
							});
						}
						
					} 
					else if(item.text=='信息采集'){
						let sys=uni.getStorageSync('open').haveSys
						if(sys!=1){
							uni.showToast({
								title:'您暂时没有该权限',
								icon:'none',
								position:'center'
							})
						}else{
							uni.navigateTo({
								url: item.url
							});
						}
			
					}
					else {
						uni.navigateTo({
							url: item.url
						});
					}
					
				} else {
					uni.showToast({
						title: '功能模块正在开发中！',
						icon: 'none',
						duration: 1000
					});
				}
			},
			// 滑动到底部。分页处理
			scrollBottom() {
				this.getNews();
			}, 
		},
	}
</script>

<style lang="stylus" scoped>
	.cardList{
		padding-top 40rpx
		width 100%
		display flex
		flex-wrap wrap
		justify-content space-between
		padding 0rpx 40rpx
		background-color #FFF
	}
	.cardList>view{
		width 320rpx
		height 160rpx
		margin-bottom 20rpx
	}
	
	.cardList>view>image{
		width 100%
		height 100%
	}

	.page_scroll {
		position absolute;
		top calc(210rpx + var(--status-bar-height));
		right 0rpx;
		bottom 0rpx;
		left 0rpx;

	}

	.news_panel {
		padding: 0px 30rpx;
		box-sizing: border-box;
		width: 100%;
		height: 355rpx;
		position: relative;

		.swiper {
			width: 100%;
			height: 275rpx;

			.swiper_item {
				width: 100%;
				height: 275rpx;

				.swiper_image {
					width: 100%;
					height: 275rpx;
					border-radius: 10rpx;
				}
			}
		}

		.notice_panel {
			height: 100rpx;
			position: absolute;
			padding: 0px 30rpx;
			box-sizing: border-box;
			left: 0rpx;
			right: 0rpx;
			bottom: -8rpx;
			background: url(https://images-vx.oss-cn-beijing.aliyuncs.com/images-vx/home-header-bottombg.png) no-repeat;
			background-size: 100% 100%;
			display: flex;
			align-items: center;
			padding: 20rpx 30rpx 0rpx 30rpx;

			.notice {
				width: 100%;
				height: 48rpx;
				display: flex;
				align-items: center;
				border-radius: 10rpx;
				box-sizing: border-box;
				/* #ifdef MP-WEIXIN */
				padding: 4rpx 20rpx 0 20rpx;
				/* #endif */
				/* #ifndef MP-WEIXIN */
				padding: 0 20rpx;
				/* #endif */
				background-color: rgba(245, 245, 245, 1);

				.notice_icon {
					width: 100rpx;
					height: 24rpx;
				}

				.notice_title {
					padding-left: 20rpx;
					flex: 1;
					height: 100%;
					position: relative;

					.swiper_notice {
						width: 100%;
						height: 100%;

						.swiper_swiper-item {
							width: 100%;
							height: 100%;
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #999999;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							padding-top: 5rpx;
						}
					}
				}

				.notice_title::before {
					content: " ";
					position: absolute;
					left: 10rpx;
					width: 1rpx;
					top: 12rpx;
					bottom: 12rpx;
					background-color: #999;
				}
			}
		}
	}


	.module {
		width: 100%;
		border-top: 0rpx solid #FFFFFF;
		padding: 0rpx 20rpx;
		box-sizing: border-box;
		background-color #fff;

		.grid {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding-bottom 40rpx

			.grid_item {
				width: 175rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.grid_image {
					width: 170rpx;
					height: 170rpx;
				}

				.grid_text {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #999999;
					margin-top: -20rpx;
				}
			}
		}
	}

	.news {
		width: 100%;
		padding: 0px 30rpx;
		box-sizing: border-box;
		background-color #fff;

		.news_header {
			width: 100%;
			height: 100rpx;
			display: flex;
			align-items: center;

			.news_icon {
				width: 30rpx;
				height: 30rpx;
				margin-top: 3rpx;
				margin-right: 10rpx;
			}

			.news_title {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 600;
				color: #333333;
			}
		}
	}
</style>
